<template>
  <div id="home">
    <!-- 头部 -->
    <nav-bar class="home-nav">
      <template v-slot:center> 购物街 </template>
    </nav-bar>
    <tab-control
      :titles="['流行', '精选', '新款']"
      @tabbarClick="tabControlClick"
      ref="tabControls1"
      class="ceiling"
      v-show="istabFixed"
    ></tab-control>
    <!-- 滚动主要内容 -->
    <scroller
      class="content"
      ref="scroller"
      :probe-type="3"
      @scroll="contentScroll"
      :pull-upload="true"
      @pullingUp="loadMore"
    >
      <!-- 轮播图 -->
      <home-swiper :banners="banners" @SwiperImgLoad.once="SwiperListImgLoad" /> <!-- 只监听一次 可以在子组件节流或者这里加修饰符.once -->
      <!-- 下方的详细信息 -->
      <home-recommends :recommends="recommends"></home-recommends>
      <home-feature></home-feature>
      <!-- 展示详细 -->
      <tab-control
        :titles="['流行', '精选', '新款']"
        @tabbarClick="tabControlClick"
        ref="tabControls2"  
      ></tab-control>
      <goods :goods="getGoodImg"></goods>
    </scroller>
    <!-- 返回顶部按钮 -->
    <back-top @click.native="backClick" v-if="isBackTop"></back-top>
  </div>
</template>

<script>
/**home相关组件的导入 */
import HomeSwiper from "./chilrenhome/homeSwiper.vue";
import HomeRecommends from "./chilrenhome/homeRecommends.vue";
import HomeFeature from "./chilrenhome/homeFeature.vue";

import NavBar from "components/common/navbar/NavBar";
import Scroller from "components/common/scroller/Scroller.vue";

import TabControl from "components/content/tabControl/TabControl";
import BackTop from "components/content/backTop/BackTop.vue";
import Goods from "components/content/goods/goods.vue";

import { getHomeMultiData, getGoodsData } from "network/home"; //数据导入
import {itemListenMixin} from 'common/mixin'

export default {
  name: "home",
  components: {
    NavBar,
    HomeSwiper,
    HomeRecommends,
    HomeFeature,
    TabControl,
    Goods,
    Scroller,
    BackTop,
  },
  mixins:[itemListenMixin],
  props: {},
  data() {
    return {
      banners: [], //存储home的所有数据
      recommends: [],
      titles: [],
      goods: {
        pop: { page: 0, list: [] },
        sell: { page: 0, list: [] },
        new: { page: 0, list: [] },
      },
      currentType: "pop",
      isBackTop: false, //是否显示返回顶部按钮
      tabOffsetTop: 0, //标签吸顶效果
      istabFixed:false,
      saveY:0,
    };
  },
  watch: {},
  computed: {
    getGoodImg() {
      return this.goods[this.currentType].list;
    },
  },
  methods: {
    /**
     * 事件监听相关代码
     */
    SwiperListImgLoad(){ /* 轮播图图片是否加载完成 然后找到标签到顶部的距离 */
      this.tabOffsetTop = this.$refs.tabControls2.$el.offsetTop;
    },
    tabControlClick(data) {
      //修改下标 发送不同的带参请求
      this.currentType = Object.keys(this.goods)[data];
      this.$refs.tabControls1.currentIndex = data; //设置同步
      this.$refs.tabControls2.currentIndex = data;
    },
    backClick() { //返回顶部
      this.$refs.scroller.scrollTo(0, 0, 500);
    },
    /* 监听滚动的长度 是否显示返回顶部按钮 */
    contentScroll(data) {
      //是否显示返回按钮  
      this.isBackTop = data.y < -1000;
      //是否到达位置进行标签吸顶
      this.istabFixed = -(data.y) > this.tabOffsetTop;
    },
    /**加载更多函数 */
    loadMore(){
      this.getGoodsDatas(this.currentType);
    },
    /**
     * 网络请求相关代码
     */
    async getHomeData() {
      //请求到所有的Home数据
      try {
        const res = await getHomeMultiData();
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      } catch (error) {
        console.log("网速慢未请求到" + error);
      }
    },
    async getGoodsDatas(type) {
      //最下面的图片区域数据
      try {
        const page = this.goods[type].page + 1;
        const { data: res } = await getGoodsData(type, page);
        this.goods[type].list = [...this.goods[type].list, ...res.list];
        this.goods[type].page += 1;
        this.$refs.scroller.finishPullUp(); //图片加载更多
      } catch (error) {
        console.log("网速慢未请求到" + error);
      }
    },
  },
  created() {
    //请求数据
    this.getHomeData();
    //请求带参的商品数据
    this.getGoodsDatas("pop");
    this.getGoodsDatas("new");
    this.getGoodsDatas("sell");
  },
  mounted() {
    
  },
  activated(){
    this.$refs.scroller.finishPullUp();
    this.$refs.scroller.scroller.scrollTo(0, this.saveY, 1);
    this.$refs.scroller.scroller.refresh();
  },
  deactivated(){
    //console.log(this.saveY);
    this.saveY = this.$refs.scroller.getCurrentY();
    this.$bus.$off("itemImgLoad",this.itemListen); //离开home不在监听
  }
};
</script>
<style lang="less" scoped>
#home {
  height: 100vh;
  position: relative;
}
.home-nav {
  background-color: var(--color-tint);
  color: var(--color-background);
 /*  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10; */
}
.ceiling{
  position: relative;
  z-index: 9;
  top: -1px;
}
.content {
  width: 100%;
  //height: calc(~"(100% - 93px)"); //less写法
  overflow: hidden;
  //margin-top: 44px;
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
  background-color: #fff;
}
</style>